<template>
	<view class="bg-white">
		<!-- 小程序引流关注公众号 -->
		<official></official>
		<u-sticky>
			<view class="header_warp bg-white p-2 flex justify-between align-center">
				<image class="logo" src="@/static/img2/home/logo.png" mode="aspectFit"></image>
				<view class="head_button flex align-center text-white">
					<image src="@/static/img2/home/home_search.png" mode="aspectFit" @tap="goPages('/subPages/home/home_search/home_search')"></image>
					<text class="mx-2"></text>
					<image src="@/static/img2/home/message.png" mode="aspectFit" @click="goPages('/pages/message/index')"></image>
					<text class="mx-2"></text>
					<image src="@/static/img2/home/my.png" mode="" @click="goPages('/pages/my/index')"></image>
				</view>
			</view>
		</u-sticky>
		<!-- 公告  @click="toExhibition"-->
		<view v-if="inform"><u-notice-bar :text="inform"></u-notice-bar></view>
		<view class="container">
			<view class="top_warp">
				<!-- 轮播图 -->
				<swiper :list="banner" @loginAlert="loginAlert = false" />
				<!-- 搜索 -->
				<!-- <view class="container"> -->
				<view class="big_nav_warp bg-white rounded_10 mt-2 py-1 px-2 position-relative">
					<view class="big_nav_item flex flex-wrap justify-between h5" :class="{ nav_active: navShow }">
						<view class="rounded_10  text-center" @tap="toExhibition">
							<image src="@/static/img2/home/zht.png" mode="aspectFit"></image>
							展会通
						</view>
						<view class="rounded_10  text-center" @tap="goPages('/subPages/home/company-list/index?navIndex=1')">
							<image src="@/static/img2/home/qyh.png" mode="aspectFit"></image>
							企业汇
						</view>
						<view class="rounded_10  text-center" @tap="goPages('/subPages/home/product_data/index?navIndex=2')">
							<image src="@/static/img2/home/cpk.png" mode="aspectFit"></image>
							产品库
						</view>
						<view class="rounded_10 text-center mt-3" @tap="toVideo(3, '看现场')">
							<image src="@/static/img2/home/ksp.png" mode="aspectFit"></image>
							看视频
						</view>
						<view class="rounded_10 text-center mt-3" @tap="goPages('/subPages/web_view_h5/index?url=https://www.solarbeglobal.com&navIndex=7&title=看海外')">
							<image src="@/static/img2/home/khw.png" mode="aspectFit"></image>
							看海外
						</view>
						<view class="rounded_10 text-center mt-3" @tap="toVideo(5, '光储真相')">
							<image src="@/static/img2/home/gczx.png" mode="aspectFit"></image>
							光储真相
						</view>
					</view>
					<view class="nav_bottom_icon position-absolute flex justify-center" style="width: 95%;bottom: -15rpx;" @click="navShow = !navShow">
						<!-- <u-icon :name="!navShow ? 'arrow-down-fill' : 'arrow-up-fill'" color="#666" size="11"></u-icon> -->
						<image class="down" v-if="!navShow" src="@/static/img2/home/icon_down.png" mode="aspectFill"></image>
						<image v-else src="@/static/img2/home/icon_up.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- </view> -->
			</view>
			<!-- <view class="container"> -->
			<view class="bg-white mt-1 rounded_10 p-2">
				<!-- 广告1 -->
				<!-- <button class="login_btn" @getphonenumber="authLogin" :open-type="opentype()">
					<view class="advertising flex justify-between" v-if="adList.length >= 1">
						<image v-for="(item, index) of adList" :key="item.id" v-if="index < 2" class="ad ad_1" :src="item.img" mode="aspectFill" @tap="toChange(item.url)"></image>
					</view>
				</button> -->
				<u-sticky offsetTop="78rpx">
					<view class="bg-white">
						<view class="news_tab flex justify-around align-center text-center rounded font">
							<view v-for="(item, index) of newsTabs" :key="index" @click="newstabChange(item, index)">
								<text :class="{ active: index + 1 == newsCur }">{{ item }}</text>
								<text class="line"></text>
							</view>
						</view>
						<view class="child_tab">
							<u-tabs
								:current="current"
								:list="childTabs"
								lineColor="#CF1526"
								:activeStyle="{ color: '#CF1526', fontWeight: 'bold' }"
								keyName="cat_name"
								@click="childtabChange"
							></u-tabs>
						</view>
					</view>
				</u-sticky>
				<view class="mt-3 h_100">
					<view v-if="newsLists.length <= 0" class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
					<view v-else><news-list :list="newsLists" :cat-id="catId"></news-list></view>
				</view>
				<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
			</view>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
			<!-- </view> -->
			<!-- 首页登录弹窗 -->
			<view class="loginPopup fixed-bottom py-1 px-2 flex align-center" v-if="loginAlert">
				<view class="text-white h6 lh_42">登录后可查看更多客户信息、交换名片、在线询价、产品对比</view>
				<button class="loginbtn c_main font_24 ml-2" @click="goPages('/subPages/login/wx_login')">去登录</button>
				<view class=" ml-2"><u-icon name="close" color="#ffffff" @click="loginAlert = false"></u-icon></view>
			</view>
		</view>
	</view>
</template>

<script>
import swiper from '@/components/swiper/swiper.vue';
import searchView from '@/components/search/search.vue';
import official from '@/components/official/official.vue';
import newsList from '@/components/news_list.vue';
import { banner, adsenseGetList, snecClassification, snecNews } from '@/api/home/home.js';
import { exhibitionIndex, announcement } from '@/api/exhibition/exhibition.js';
import { mapMutations } from 'vuex';
export default {
	components: { swiper, searchView, official, newsList },
	data() {
		return {
			inform: '通知：索比企业通上线啦~,大家快来用!!!', //顶部通知
			banner: [],
			navShow: false,
			changeVal: null,
			exhibitionId: '', //展会id
			exhibitionState: '', //展会状态
			hothide: false, //热力榜是否全展示出来
			loginAlert: false,
			adList: [], //广告
			newsTabs: ['光伏', '储能', '氢能'],
			newsCur: 1,
			childTabs: [],
			current: 0,
			catId: '',
			page: 1,
			status: 'loadmore',
			suo: true,
			newsLists: [],
			scrollTop: 0
		};
	},
	onPullDownRefresh() {
		// this.getInit();
		this.getExhibition();
		this.messageTips();
		this.getNewsCate();
	},
	//监测页面滑动
	onPageScroll(e) {
		setTimeout(() => {
			this.hothide = true;
		}, 1000);
	},
	onShow() {
		this.getExhibition();
		this.messageTips();
		// let msg = { navIndex: 3, title: '看视频' };
		// uni.setStorageSync('videoType', msg);
		this.loginAlert = !uni.getStorageSync('userInfo').hasLogin ? true : false;
	},
	onLoad() {
		// this.toLogin(); // 未登录
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		this.getInit();
		this.getNewsCate(1);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.getNewsList(this.catId, this.catName);
			}, 1000);
		}
	},
	methods: {
		getInit() {
			// 公告
			announcement({ is_recommend: 1 }).then(res => {
				if (res.code == 0) {
					// this.inform = res.data.map(item => item.content);
				} else {
					console.log('推广企业获取失败', res.msg);
				}
			});
			// 轮播图
			banner({
				type: 1
			}).then(res => {
				this.banner = res.data.list;
			});
			// 广告位
			adsenseGetList().then(res => {
				// console.log(res);
				if (res.code == 0) {
					this.adList = res.data;
				} else {
					console.log('获取广告列表失败', res.msg);
				}
			});
		},
		// 获取展会id
		getExhibition() {
			exhibitionIndex().then(res => {
				// console.log('首页获取展会id', res);
				if (res.code == 0) {
					this.exhibitionId = res.id;
					this.inform = res.title;
					this.exhibitionState = res.activity_status; //展会状态
					let msg = {
						exhibitionId: res.id,
						state: res.activity_status
					};
					uni.setStorageSync('exhibition', msg);
					uni.stopPullDownRefresh();
				}
			});
		},
		// 展会通
		toExhibition() {
			if (this.exhibitionId == 0) {
				// 跳转展会列表
				this.goPages('/subPages/exhibition/list');
			} else {
				// 跳转展会详情
				uni.setStorageSync('productType', 'admin');
				// if (this.exhibitionState == 1) {
				// 	// 开展前
				// 	this.goPages('/subPages/exhibition/before?id=' + this.exhibitionId + '&active=' + this.exhibitionState);
				// } else {
				// 开展后
				this.goPages('/subPages/exhibition/index?id=' + this.exhibitionId + '&active=' + this.exhibitionState);
				// }
			}
		},
		toVideo(num, tit) {
			let msg = { navIndex: num, title: tit };
			uni.setStorageSync('videoType', msg);
			this.goPages('/pages/video/video_live');
		},
		newstabChange(val, idx) {
			this.newsCur = idx + 1;
			this.getNewsCate();
		},
		// 获取新闻分类
		getNewsCate() {
			snecClassification({ type: this.newsCur }).then(res => {
				if (res.code == 0) {
					this.childTabs = res.data;
					this.childtabChange({ cat_id: 0, cat_name: '全部', index: 0 });
				} else {
					console.log('获取新闻分类失败', res.msg);
				}
			});
		},
		// 选择子分类
		childtabChange(item) {
			this.current = item.index;
			this.catId = item.cat_id;
			this.catName = item.cat_name;
			this.page = 1;
			this.newsLists = [];
			this.getNewsList(this.catId, this.catName);
		},
		// 新闻列表
		getNewsList(id, name) {
			let msg = {
				type: this.newsCur,
				cat_id: id,
				cat_name: name,
				page: this.page
			};
			snecNews(msg).then(res => {
				// console.log('新闻列表', res);
				if (res.code == 0) {
					this.newsLists.push(...res.data);
					if (res.data.length == 0) {
						this.status = 'nomore';
						this.suo = false;
					} else if (res.data.length < 10) {
						this.status = 'nomore';
						this.suo = false;
					} else {
						this.status = 'loadmore';
						this.suo = true;
					}
				} else {
					uni.$u.toast(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.header_warp {
	height: 78rpx;
	.logo {
		width: 158rpx;
		height: 31rpx;
	}
	.head_button {
		image {
			width: 39rpx;
			height: 39rpx;
		}
		text {
			font-weight: 100;
			border-left: 1px solid #fff;
			width: 1rpx;
			height: 27rpx;
		}
	}
}
.top_warp {
	.big_nav_warp {
		width: 100%;
		position: relative;
		// margin-top: -40rpx;
		.big_nav_item {
			height: 75rpx;
			overflow: hidden;
			transition: height ease-in 0.2s;

			view {
				width: calc((100% / 3) - 20rpx);
				padding: 10rpx 0;
				// background: url('@/static/img2/home/nav_bg.jpg');
				// background: #fff4f4;
				background-color: #f5f5f5;
				background-size: cover;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 30rpx;
					height: 30rpx;
					border-radius: 0;
					margin-right: 10rpx;
				}
			}
		}
		.nav_active {
			height: auto;
			transition: height ease-in 0.2s;
		}
		.nav_bottom_icon {
			image {
				width: 40rpx;
				height: 20rpx;
			}
			// .down {
			// 	margin-top: -20rpx;
			// }
		}
	}
}

// 中间广告
.advertising {
	width: 100%;

	.ad {
		position: relative;
	}

	.ad::after {
		content: '广告';
		color: #fff;
		// border: 1px solid #fff;
		border-radius: 5rpx;
		font-size: 18rpx;
		position: absolute;
		right: 5rpx;
		bottom: 13rpx;
		padding: 0 5rpx;
	}

	.ad_1 {
		width: calc((100% / 2) - 10rpx);
		height: 100rpx;
	}

	.ad_2 {
		width: 100%;
		height: 100rpx;
	}
}

.news_tab {
	background: #f5f5f5;
	padding: 10rpx 100rpx;
	view {
		width: calc(100% / 2);
	}
	view:last-child .line {
		border-right: 0;
	}
	.line {
		border-right: 1rpx solid #787878;
		width: 1px;
		height: 20rpx;
		float: right;
		transform: translateY(12rpx);
	}
	.active {
		color: $color14;
		font-weight: bold;
		padding-bottom: 5rpx;
		position: relative;
	}
	.active::after {
		content: '';
		width: 40rpx;
		border-bottom: 3px solid $color14;
		display: inline-block;
		position: absolute;
		bottom: -5rpx;
		left: 50%;
		margin-left: -20rpx;
		border-radius: 30rpx;
	}
}
.child_tab {
	border-bottom: 1px solid #d9d9d9;
}

.loginPopup {
	bottom: 20rpx;
	width: 95%;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 14rpx;
	margin: 0 20rpx;

	.loginbtn {
		width: 180rpx;
		height: 48rpx;
		line-height: 48rpx;
	}
}
// ::v-deep uni-swiper .uni-swiper-dot {
// 	transform: translateY(-30rpx);
// }
// ::v-deep wx-swiper .wx-swiper-dot {
// 	transform: translateY(-30rpx);
// }
// ::v-deep .u-notice-bar {
// 	padding: 4px 12px !important;
// }
</style>
